<template>
  <div class="docker">
    <span
      v-for="(item, index) in dockerList"
      :key="item.icon"
      :class="{ docker__item: true, 'docker__item--active': path === item.to }"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"></div>
        <div class="docker__title">{{ item.name }}</div>
      </router-link>
    </span>
  </div>
</template>
<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
export default {
  name: 'Docker',
  setup() {
    const route = useRoute();
    const path = ref(route.fullPath);
    const dockerList = [
      { icon: '&#xe6b8;', name: '首页', to: '/' },
      { icon: '&#xe713;', name: '订单', to: '/orderList' },
      { icon: '&#xe607;', name: '购物车', to: '/cartlist' },
      { icon: '&#xe78b;', name: '我的', to: '/address' },
    ];
    return { dockerList, path };
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.docker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  display: flex;
  padding: 0 0.18rem;
  box-sizing: border-box;
  &__item {
    text-align: center;
    // line-height: 0.49rem;
    flex: 1;
    a {
      text-decoration: none;
      color: $content-fontcolor;
    }
    .iconfont {
      font-size: 0.18rem;
      margin-top: 0.07rem;
      margin-bottom: 0.02rem;
    }
    &--active {
      a {
        color: #1fa4fc;
      }
    }
  }
  &__title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>